<template>
	<view style="height: 100%">
		<template v-if="knowledgeId">
			<u-loading-page v-if='spinShow'></u-loading-page>
			<view v-else class="content" style="height: 100%;">
				<view class="knowledgePage">
					<view class="knowledgeTitle">{{knowledgeInfo.knowledgeName}}</view>
					<view class="knowledgeMarks">
						<view class="knowledgeBaseInfo">
							<view class="flex">
								<view class="label">发布时间：</view>
								<view class="value">{{knowledgeInfo.releaseTime || '--'}}</view>
							</view>

							<view class="flex">
								<view class="label">作者：</view>
								<view class="value">{{knowledgeInfo.knowledgeAuthors || '--'}}</view>
							</view>

							<view class="flex">
								<view class="label">知识类别：</view>
								<view class="value">{{knowledgeInfo.knowledgeTypeLabel || '--'}}</view>
							</view>

							<view class="flex" v-if="knowledgeInfo.categoryList && knowledgeInfo.categoryList.length > 0">
								<view class="label">知识类目：</view>
								<view class="value">
									<template v-for="(part, index) in knowledgeInfo.categoryList">
										{{part.categoryName}}
										<template v-if="index != knowledgeInfo.categoryList.length-1">/</template>
									</template>
								</view>
							</view>

							<view class="flex" v-if="knowledgeInfo.areaList && knowledgeInfo.areaList.length > 0">
								<view class="label">适用区域：</view>
								<view class="value">
									<template v-for=" (area, index) in knowledgeInfo.areaList">
										{{area.name}}
										<template v-if="index != knowledgeInfo.areaList.length-1">/</template>
									</template>
								</view>
							</view>
						</view>

						<view class="knowledgeBaseInfo">
							<view class="flex">
								<view class="label">摘自：</view>
								<view class="value">{{knowledgeInfo.knowledgeSource}}</view>
							</view>
						</view>
					</view>

					<view class="knowledgeDesc" v-if="knowledgeInfo.knowledgeDesc">摘要：{{knowledgeInfo.knowledgeDesc}}</view>
					<view style="flex-grow: 1; min-height: 40vh">
						<view v-html="knowledgeInfo.knowledgeContent"></view>
						<!-- 		<iframe frameborder="0" height="100%" id="ueditor-preview" scrolling="no" v-if="previewHtml"
						width="100%"></iframe> -->
					</view>
					<view class="knowledgeFooter">
						<view v-if="knowledgeInfo.knowledgeTags && knowledgeInfo.knowledgeTags.length > 0">
							<view class="label">标签：</view>
							<view class="value">
								<u-tag :key="tag" class="value" color="primary"
									v-for=" tag in knowledgeInfo.knowledgeTags">{{tag}}</u-tag>
							</view>
						</view>
					</view>
				</view>
				<u-button @click="share()" size="small" style="width: max-content;bottom: 10px;position: absolute;right: 10px;"
					type="primary" v-if="shareBth">分享</u-button>
			</view>
		</template>
		<view v-else style="text-align: center;">无效链接</view>
	</view>
</template>
<script>
	import {
		toast
	} from '@/utils/utils.js'
	export default {
		name: "knowledge-detail",
		props: {
			knowledgeId: {
				require: false,
				default: null
			},
			shareBth: {
				require: false,
				default: false
			},
			url: {
				require: false,
				default: ''
			},
			currentGroupId: {
				require: false,
				default: ''
			}
		},
		data() {
			return {
				spinShow: false,
				knowledgeInfo: {
					knowledgeName: null,
					knowledgeDesc: null,
					knowledgeLabels: [],
					categorySet: [],
					active: 1,
					knowledgeContent: '',
					knowledgeAuthors: null,
					knowledgeSource: null
				},
				previewHtml: ''
			}
		},
		watch: {
			knowledgeId: {
				deep: true,
				immediate: true,
				handler: function(val) {
					console.log('val', val)
					if (val) {
						this.getDetail()
					}
				}
			}
		},
		methods: {
			share: function() {
				let params =
					`${this.knowledgeInfo.id}|${new Date().getTime()}|${this.$store.getters['userInfo/account']}|${this.currentGroupId}`
				let url = this.knowledgeInfo.shareBasePath +
					`?params=${encodeURIComponent(this.$paramsCrypto.encrypt(params))}`
				this.$emit('shareParams', {
					...this.knowledgeInfo,
					shareUrl: url
				})
			},
			getDetail: function() {
				let that = this
				that.spinShow = true
				that.$api.getKnowledgeDetail({
					"id": this.knowledgeId
				}).then(res => {
					if (res.success) {
						that.knowledgeInfo = res.result || {}
						uni.$emit('knowledgeDetail', that.knowledgeInfo)
						// that.knowledgeInfo.knowledgeContent = "<view><p><strong>问题2：和租客签了两年的房屋租赁合同，结果对方用来给员工做宿舍。现在遇到疫情情况，对方考虑自己的经营情况不想提供宿舍给员工了，所以想和我们提前解除合同，算违约吗？</strong></p><p><strong>律师解答：</strong>首先，您不知晓房屋的用途为员工宿舍，承租人擅自改变用途，构成合同的违约。其次，即使事先知晓是员工宿舍，疫情的发生并不必然导致员工宿舍不可使用，合同目的并非必定不能实现。要结合有关复工的法律规定综合判断合同目的是否不达，是否构成不可抗力。若不符合不可抗力的构成要见，或承租人违反用途违约在先，承租方应当继续履行其租赁义务，擅自解除的做法需承担法律责任。</p><p><strong>法律规定：</strong></p><p><strong>《合同法》第94条：</strong>有下列情形之一的，当事人可以解除合同：（一）因不可抗力致使不能实现合同目的；（二）在履行期限届满之前，当事人一方明确表示或者以自己的行为表明不履行主要债务；（三）当事人一方迟延履行主要债务，经催告后在合理期限内仍未履行；（四）当事人一方迟延履行债务或者有其他违约行为致使不能实现合同目的；（五）法律规定的其他情形。</p><p><strong>《合同法》第107条：</strong>当事人一方不履行合同义务或者履行合同义务不符合约定的，应当承担继续履行、采取补救措施或者赔偿损失等违约责任。</p></view>"
						// const iframeHTML =
						// 	"<!DOCTYPE html><html style='width: 100%;min-height: max-content;'><head><meta charset='utf-8'/><script src='/UEditorPlus/ueditor.parse.js'></" +
						// 	"script><script>setTimeout(function(){uParse('div',{rootPath: '/UEditorPlus/'})}, 300)</" +
						// 	"script></head><body><view>" + that.knowledgeInfo.knowledgeContent + "</view></body></html>"

						// that.$nextTick(() => {
						// 	that.reintoast
						// })
					} else {
						toast(res.message)
					}
				}).catch(function(err) {
					toast("获取详情失败！")
				}).finally(() => {
					that.spinShow = false
				})
			},
			reinitIframe: function() {
				try {
					let dom = document.getElementById("ueditor-preview")
					if (dom) {
						dom.contentWindow.document.write(this.previewHtml)
						setTimeout(() => {
							let height = dom.contentWindow.document.lastChild.offsetHeight || 500
							console.log('dom.contentWindow.document', height)
							dom.height = height
						}, 500)
					}

					// var iframe = document.getElementById("ueditor-preview")
					// var bHeight = iframe.contentWindow.document.body.scrollHeight
					// var dHeight = iframe.contentWindow.document.documentElement.scrollHeight
					// var height = Math.max(bHeight, dHeight)
					// iframe.height = height
					// iframe.contentWindow.document.write(this.previewHtml)
					// console.log(height)
				} catch (ex) {}
			}
		},
		// beforeMount() {
		// 	if (this.id) {
		// 		this.getDetail()
		// 	}
		// }
	}
</script>
<style lang="scss" scoped>
	.knowledgePage {
		height: 100%;
		min-height: 100%;
		display: flex;
		padding: 10px;
		flex-direction: column;
		background: #fff;

		.knowledgeTitle {
			font-weight: 500;
			line-height: 2rem;
			font-size: 1rem;
			text-align: center;
		}

		.knowledgeMarks {
			border-bottom: 1px dashed #ddd;
			margin-bottom: 1rem;
		}

		.knowledgeDesc {
			font-size: 0.85rem;
			margin-bottom: 1rem;
		}

		.knowledgeBaseInfo {
			display: flex;
			flex-wrap: wrap;
			color: #999;
			font-size: 0.85rem;
			overflow: hidden;
			line-height: 2rem;
			justify-content: center;

			.flex {
				white-space: nowrap;
				overflow: hidden;
				position: relative;
				padding: 0 6px;
				width: max-content;

				.label {
					white-space: nowrap;
					width: fit-content;
				}

				.value {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			// > div:not(:last-child) {
			//   margin-right: 8px;
			// }

			>div:not(:last-child)::after {
				content: '';
				height: 12px;
				border-left: 2px solid #ddd;
				background-color: #666;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				right: 0;
			}
		}

		.knowledgeContent {
			color: #666;
			font-size: 0.8rem;
			margin-bottom: 1rem;
		}

		.knowledgeFooter {
			color: #666;
			font-size: 0.8rem;
		}
	}
</style>